<template>
  <div class="demo">
    <div class="demo-title">更新消息内容</div>
    <div class="demo-content">
      <Button type="primary" @click="openNotification">
        Open the notification box (update by key)
      </Button>
      <br />
      <br />
      <Button type="primary" @click="openNotification2">
        Open the notification box (update by reactive)
      </Button>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import Button from '@sscd/button';
  import Notification from '@sscd/notification';
  const key = 'updatable';
  const openNotification = () => {
    Notification.open({
      key,
      message: 'Notification Title',
      description: 'description.',
    });
    setTimeout(() => {
      Notification.open({
        key,
        message: 'New Title',
        description: 'New description.',
      });
    }, 1000);
  };
  const message = ref('Notification Title');
  const description = ref('description');
  const openNotification2 = () => {
    // content must use function
    Notification.open({
      message: () => message.value,
      description: () => description.value,
    });
    setTimeout(() => {
      message.value = 'New Title';
      description.value = 'New description.';
    }, 1000);
  };
</script>
